feat(console): warm, tactile UI redesign - #14

apps/console/components/job-form.tsx (1)

279-279: ⚡ Quick win

Align CriterionRow background with PolicyRow for consistency.

CriterionRow (line 279) uses bg-background, while the analogous PolicyRow in config-form.tsx (line 212) uses bg-muted/30. Both are similar container rows with borders. Consider using the same background token for visual consistency across the console.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/console/components/job-form.tsx` at line 279, The CriterionRow component
in job-form.tsx uses the bg-background background class while the analogous
PolicyRow in config-form.tsx uses bg-muted/30. To maintain visual consistency
across the console, update the className on the div element containing
rounded-lg border bg-background p-2.5 to use bg-muted/30 instead of
bg-background, matching the styling pattern of PolicyRow.

apps/console/app/globals.css (1)

117-117: ⚡ Quick win

Stylelint false positive on text-rendering value.

Stylelint is flagging optimizeLegibility and suggesting optimizelegibility, but per the CSS specification (MDN, W3C), text-rendering values are case-sensitive and optimizeLegibility (camelCase) is the correct value. The lowercase variant is not valid CSS.

Suppress this line or add optimizeLegibility to the value-keyword-case rule's ignoreKeywords list.

🔧 Proposed fix

     line-height: 1.55;
     letter-spacing: -0.005em;
     -webkit-font-smoothing: antialiased;
+    /* stylelint-disable-next-line value-keyword-case */
     text-rendering: optimizeLegibility;
   }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/console/app/globals.css` at line 117, The `text-rendering:
optimizeLegibility;` property in globals.css is triggering an incorrect
Stylelint warning suggesting the lowercase variant. Since `optimizeLegibility`
(camelCase) is the correct CSS specification value, suppress this specific line
using a Stylelint disable comment (e.g., /* stylelint-disable-next-line
value-keyword-case */) above the text-rendering property, or alternatively add
`optimizeLegibility` to the `ignoreKeywords` array in your Stylelint
configuration's `value-keyword-case` rule to prevent this false positive from
occurring again.

Source: Linters/SAST tools

apps/console/components/ui/select.tsx (1)

8-8: 💤 Low value

Consider aligning horizontal padding with Input for visual consistency.

The Select component uses px-2.5 while the Input component (line 8 in input.tsx) uses px-3. This creates a subtle visual misalignment when these form controls appear together in forms.

If the difference is intentional to accommodate native select styling, consider documenting it. Otherwise, standardizing on px-3 would improve visual consistency.

Align padding with Input

-        "flex h-9 w-full rounded-lg border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/console/components/ui/select.tsx` at line 8, The Select component uses
`px-2.5` for horizontal padding while the Input component uses `px-3`, creating
visual inconsistency when these form controls are used together. In the Select
component's className string, change the horizontal padding value from `px-2.5`
to `px-3` to align with the Input component's padding and maintain visual
consistency across form controls.